<template>
  <div class="box">
    <div class="actcount">
      <img :src="this.data.profile.avatarUrl" />
      <span class="nickName">{{ this.data.profile.nickname }}</span>
      <div class="content">
        <span>{{ this.data.profile.follows }}关注</span>&nbsp; <span>{{ this.data.profile.followeds }}粉丝</span>&nbsp;
        <span>LV{{ this.data.level }}</span>
      </div>
    </div>

    <van-grid square :gutter="10">
      <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
    </van-grid>
    <!--我喜欢的音乐 -->
    <van-card centered :desc="this.mylike.trackCount + '首'" :title="this.mylike.name" :thumb="this.mylike.coverImgUrl" />
    <!-- 歌单分类 -->
    <van-tabs v-model="tabactive" scrollspy sticky>
      <van-tab v-for="index in songList" :title="index" name="name" :key="index">
        <div class="tab-content" :class="{ last: songList.length - 1 === index }"></div>
      </van-tab>
      <div class="Createplaylist">
        <span>收藏歌单({{ this.Createplaylist.length }})</span>
        <van-card v-for="(item, index) of this.Createplaylist" :desc="item.trackCount + '首'" :key="index" :title="item.name" centered :thumb="item.coverImgUrl" />
      </div>
      <div class="Createplaylist">
        <span>收藏歌单({{ this.Favoriteplaylist.length }})</span>
        <van-card v-for="(item, index) of this.Favoriteplaylist" :desc="item.trackCount + '首'" :key="index" :title="item.name" centered :thumb="item.coverImgUrl" />
      </div>
    </van-tabs>

    <!-- 底部导航 -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import TabBar from '../comm/Tabbar.vue'
export default {
  data() {
    return {
      tabactive: 0,
      data: {
        profile: {
          // 默认头像路径
          avatarUrl: '',
        },
      },
      // 去掉  我喜欢的歌单数据
      playlist: [],
      // 我喜欢的歌单数据
      mylike: [],
      // 创建歌单数据
      Createplaylist: [],
      // 收藏歌单的数据
      Favoriteplaylist: [],
      songList: ['创建歌单', '收藏歌单', '歌单助手'],
    }
  },
  mounted() {
    let cookie = window.localStorage.getItem('cookie')
    let uid = window.localStorage.getItem('userId')
    let userId = window.localStorage.getItem('userId')
    this.$nextTick(() => {
      this.http.get(`/user/detail?uid=${userId}?cookie=${cookie}`).then((res) => {
        this.data = res.data
      })
      this.http.get(`/user/playlist?uid=${uid}`).then((res) => {
        if (res.data.code !== 200) {
          this.$toast({
            message: '获取数据失败',
          })
          return false
        }
        this.mylike = res.data.playlist[0]
        this.playlist = res.data.playlist.slice(1)
        this.Createplaylist = this.playlist.splice(0, 7)
        this.Favoriteplaylist = this.playlist
        console.log(this.Createplaylist, this.Favoriteplaylist)
      })
    })
  },
  methods: {},
  components: {
    TabBar,
  },
}
</script>

<style scoped>
.box /deep/ .van-tabs__line {
  z-index: 0;
}
.Createplaylist {
  background-color: #ffffff45;
  margin: 10px 0;
  padding: 10px;
  box-sizing: border-box;
}
.van-card__header {
  align-items: center;
  padding: 0 10px;
}
.van-card__thumb {
  width: 64px;
  height: 64px;
}

.tab-content {
  height: auto;
}
.tab-content.last {
  height: calc(100vh - 44px);
}
.van-card {
  padding: 0;
  border-radius: 10px;
}
.actcount {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 80px 0 10px;
  height: 100px;
  justify-content: flex-end;
}
.actcount img {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translate(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.content {
  margin: 10px 0;
}
</style>
